<template>
  <div style="justify-content: center;align-items: center;display: flex;">
    <el-card style="width: 540px;margin-top: 40px;height: 650px;" >
<el-row>
      <el-col :span="24" style="height: 100px;">
       <div style="align-items: center;display: flex;margin-top: 15px;">
         <img src="../assets/images/logo.png"  style="height: 70px;width: 70px;">
         <label style="margin-left: 15px;font-size: 30px;letter-spacing: 5px;color: #707070;">智能销售系统</label>
         </div>
      </el-col>

      </el-row>
       <el-divider></el-divider>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!-- <el-col :span="24">
          <el-form-item label="注册类型" prop="deptType">
            <el-radio-group v-model="form.deptType">
              <el-radio
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="单位名称" prop="deptName">
            <el-input v-model="form.deptName" placeholder="请输入单位名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
          </el-form-item>
        </el-col>

          <el-col :span="12">
            <el-form-item label="验证码" prop="smscode">
              <el-input v-model="form.smscode" placeholder="请输入验证码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div v-if="!show" style="line-height: 40px;margin-left: 10px;color: #1890FF;">
              <label  >验证码已发送 {{count}} s</label>
            </div>

            <el-button type="primary" style="margin-left: 20px;" @click="sendcode" v-if="show"> 获取验证码</el-button>
          </el-col>

        <el-col :span="24">
          <el-form-item  label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" type="password" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item  label="确认密码" prop="conpassword">
            <el-input v-model="form.conpassword" placeholder="请输入确认密码" type="password" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" style="width: 100%;"  @click="submitForm">注册</el-button>
        </el-col>
       </el-form>
    </el-card>
  </div>



</template>

<script>
  import {saveSign,isRightSmsRegCode} from "@/api/system/user";
import store from '@/store'
  export default {
    name: "register",
  data() {
    return {
      // 状态数据字典
      statusOptions: [],
      // 表单参数
      form: {},
      show: true,
         count: '',
         timer: null,
         // 表单校验
         rules: {
           deptType: [
             { required: true, message: "注册类型不能为空", trigger: "blur" }
           ],
           deptName: [
             { required: true, message: "单位名称不能为空", trigger: "blur" }
           ],
           phonenumber: [
             { required: true, message: "手机号码不能为空", trigger: "blur" },
             {
               pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
               message: "请输入正确的手机号码",
               trigger: "blur"
             }
           ],
           smscode: [
             { required: true, message: "验证码不能为空", trigger: "blur" },
             {
               pattern: /^[1-9][0-9]*$/,
               message: "请输入正确的验证码",
               trigger: "blur"
             }
           ],

           password: [
             { required: true, message: "用户密码不能为空", trigger: "blur" }
           ],
           conpassword: [
             { required: true, message: "确认密码不能为空", trigger: "blur" }
           ],



         }
    }
    },
     created() {
       this.getDicts("zyx_regtype").then(response => {
         this.statusOptions = response.data;
       });
     },
      methods: {
        sendcode(){
          //手机号为空的判断
          this.sendSmsReg(this.form.phonenumber).then(response=>{
            if(response.isexist==='1'){
                this.msgError("手机号已注册，请使用其他手机号进行注册。")
                return;
            }else{
              this. getCode();
            }

          })
        },
        getCode(){

             const TIME_COUNT = 60;
             if (!this.timer) {
               this.count = TIME_COUNT;
               this.show = false;
               this.timer = setInterval(() => {
               if (this.count > 0 && this.count <= TIME_COUNT) {
                 this.count--;
                } else {
                 this.show = true;
                 clearInterval(this.timer);
                 this.timer = null;
                }
               }, 1000)
              }
           },

           /** 提交按钮 */
           submitForm: function() {

               this.$refs["form"].validate(valid => {
                 if (valid) {
                   if(this.form.password!=this.form.conpassword){
                     this.msgError("两次密码输入不一致")
                     return;
                   }
                   //校验验证码
                     isRightSmsRegCode(this.form).then(response => {
                       if(response.isright==='1'){
                         saveSign(this.form).then(response => {
                           this.$alert('恭喜您，注册成功', '提示', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                      store.dispatch('LogOut').then(() => {
                                        location.href = '/';
                                      })
                                    }
                                  });
                         });
                       }else{


                         this.msgError("验证码不正确")
                       }
                       console.log(response)
                       // this.msgError("验证码不正确")
                         // saveSign(this.form).then(response => {
                         //   this.msgSuccess("注册成功");
                         // });
                     });
                 }
               });


           },
      },
      }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }


</style>
